<!--
 * @Author: byron
 * @Date: 2022-01-06 00:12:14
 * @LastEditTime: 2022-02-11 10:58:38
-->
<template>
    <div class="diary-block" v-show="diarylist.length != 0">
        <el-timeline>
            <el-timeline-item
                v-for="(item, index) in diarylist"
                :key="index"
                :timestamp="item.time"
                placement="top"
            >
                <el-card>
                    <p style="line-height: 2">{{ item.content }}</p>
                </el-card>
            </el-timeline-item>
        </el-timeline>
        <div class="button-warp">
            <button class="button btn-more">加载更多</button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            diarylist: [],
        }
    },
    methods: {
        async getData() {
            const diarylist = this.$store.getters.diaryList
            if (diarylist.length == 0) {
                await this.$store.dispatch('diary/agetDiary')
                this.diarylist = this.$store.getters.diaryList
                this.$nextTick(() => {
                    this.$emit('updateHandle')
                })
            } else {
                this.diarylist = this.$store.getters.diaryList
                this.$nextTick(() => {
                    this.$emit('updateHandle')
                })
            }
        },
    },
    created() {
        this.getData()
    },
}
</script>
<style lang="less" scoped>
.diary-block {
    padding: 10px 20px;
}
@keyframes diary-content-fade {
    from {
        transform: translateY(10px);
        opacity: 0.5;
    }
    to {
        opacity: 1;
    }
}
p {
    animation: diary-content-fade 0.6s ease-in-out 1 forwards;
}
.button-warp {
    display: flex;
    justify-content: center;
    .btn-more {
        border-radius: 4px;
        width: 120px;
        height: 40px;
    }
}
</style>
